import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import Icon from '../../../components/Icon/index'
import Input from '../../../components/Input/index'
import NavBar from '../../../components/NavBar/index'
import styles from './index.module.scss'

const ProfileChat = () => {
  const [messageList] = useState([
    // 放两条初始消息
    { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    { type: 'user', text: '你好' },
  ])
  const user = useSelector((state) => state.profile.user)

  //socket.io的连接  接口过期，做不了了
  // useEffect(() => {
  //   //socket.io的连接对象
  //   const client = io('http://toutiao.itheima.net', {
  //     query: {
  //       token: getTokenInfo().token,
  //     },
  //     transports: ['websocket'],
  //   })
  //   console.log(client)
  //   //连接成功后的事件
  //   // client.on('connect', function () {
  //   //   setMessageList([
  //   //     ...messageList,
  //   //     { type: 'robot', text: '你好，你有什么想问的吗？' },
  //   //   ])
  //   // })
  //   return () => {
  //     client.close()
  //   }
  // })
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className='fixed-header'>小智同学</NavBar>

      {/* 聊天记录列表 */}
      <div className='chat-list'>
        {messageList.map((item, index) => {
          // 机器人的消息
          if (item.type === 'robot') {
            return (
              <div className='chat-item' key={index}>
                <Icon type='icon-kefu' />
                <div className='message'>{item.text}</div>
              </div>
            )
          }
          // 用户的消息
          else {
            return (
              <div className='chat-item user' key={index}>
                <img
                  src={
                    user.photo ||
                    'http://toutiao.itheima.net/images/user_head.jpg'
                  }
                  alt=''
                />
                <div className='message'>{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className='input-footer'>
        <Input className='no-border' placeholder='请描述您的问题' />
        <Icon type='iconbianji' />
      </div>
    </div>
  )
}

export default ProfileChat
